<template>
    <div>
        <div class="row">
            <div class="col-md-4 col-sm-4 col-xs-12">
                <Input v-model="title" placeholder="文章标题"></Input>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <Select v-model="selectedType" placeholder="选择分类">
                    <Option v-for="typ in types" :value="typ.fidno" :key="typ">{{ typ.fname }}</Option>
                </Select>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <Select v-model="selectedTags" multiple placeholder="选择标签">
                    <Option v-for="tag in tags" :value="tag.id" :key="tag">{{tag.cname}}</Option>
                </Select>
            </div>
        </div>
        <div id="editor">
    
        </div>
        <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-6">
                <Button type="error" long @click="toArticlesList">取消</Button>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-6">
                <Button type="success" long @click="uploads">发布</Button>
            </div>
        <div>{{editorContent}}</div>
        </div>
    </div>
</template>
<script>
import API from '../api'
import URL from '../urls'
import 'wangeditor/dist/js/wangEditor.min.js'
import 'wangeditor/dist/css/wangEditor.min.css'
export default {
    data() {
        return {
            title: '',
            types: [],
            selectedType: '',
            tags: [],
            selectedTags: [],
            editorContent:''
        }
    },
    methods: {
        getTypes() {
            API.request(URL.GETTYPES, {}, (res) => {
                if (res) {
                    this.types = res.Table2
                } else {

                }
            })
        },
        getTags() {
            API.request(URL.GETTAGS, {}, (res) => {
                if (res) {
                    this.tags = res.Table2
                } else {

                }
            })
        },
        toArticlesList() {
            this.$router.push('ArticlesList')
        },
        uploads() {
            var params = {
                data: {
                    title: this.title,
                    content: this.editorContent,
                    typ: this.selectedType,
                    tags: this.selectedTags.join(',')
                }
            }
            if (!this.title) return
            if (!this.editorContent) return
            API.request(URL.UPLOAD, params, (res) => {
                console.log(URL.UPLOAD)
                if (res) {
                    this.$Notice.open({
                        title: '',
                        desc: '发布成功',
                        duration: 1
                    });
                    this.toArticlesList()
                }
            })
        }
    },
    mounted() {
        this.getTypes()
        this.getTags()
        var div = document.getElementById('editor')
        var editor = new wangEditor(div)
        editor.onchange =  ()=> {
            // onchange 事件中更新数据
            this.editorContent = editor.$txt.html();
        };
        editor.create()
    },
}
</script>
<style>
.row {
    margin-bottom: 20px;
    margin-top: 20px;
}

#editor {
    height: 300px;
}
</style>

